<!-- 铭牌详情页面 - 已移动到skill-tree目录 -->
<template>
  <view class="star-bg"></view>
  <view class="badge-detail-container">
    <!-- 时间筛选器 -->
    <view class="time-filter-card">
      <view class="section-title">时间筛选</view>
      <view class="time-filter-content">
        <view class="filter-row">
          <text class="filter-label">开始时间：</text>
          <picker mode="date" :value="startTime" @change="onStartTimeChange">
            <view class="picker-view">{{ startTime || '请选择' }}</view>
          </picker>
        </view>
        <view class="filter-row">
          <text class="filter-label">结束时间：</text>
          <picker mode="date" :value="endTime" @change="onEndTimeChange">
            <view class="picker-view">{{ endTime || '请选择' }}</view>
          </picker>
        </view>
        <view class="filter-actions">
          <button class="reset-btn" @click="resetTimeFilter">重置</button>
          <button class="apply-btn" @click="applyTimeFilter">应用筛选</button>
        </view>
      </view>
    </view>

    <!-- 铭牌基本信息 -->
    <view v-if="badgeDetail" class="badge-info-card">
      <view class="badge-info-title">铭牌信息</view>
      <view class="badge-info-content">
        <view class="info-row">
          <text class="info-label">铭牌ID：</text>
          <text>{{ badgeDetail.id }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">分区编码：</text>
          <text>{{ getBadgeNameByAssociation(badgeDetail.association) }} Lv{{ badgeDetail.level }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">等级：</text>
          <text>Lv{{ badgeDetail.level }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">创建时间：</text>
          <text>{{ formatDate(badgeDetail.createdAt) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">评价：</text>
          <text>{{ badgeDetail.evaluation || '暂无评价' }}</text>
        </view>
      </view>
    </view>

    <!-- 贡献者列表 -->
    <view class="contributors-section" v-if="badgeDetail && badgeDetail.contributors">
      <view class="section-title">贡献者列表</view>
      <view class="contributors-table">
        <view class="contributor-header-cell">用户ID</view>
        <view class="contributor-header-cell">角色</view>
        <view class="contributor-header-cell">贡献比例</view>
        <view class="contributor-header-cell">状态</view>
        <template v-for="c in badgeDetail.contributors" :key="c.uid">
          <view class="cell">{{ c.uid }}</view>
          <view class="cell">{{ c.role || '-' }}</view>
          <view class="cell contribution-cell">
            <view class="battery-bar">
              <view class="battery-bar-inner" :style="{width: c.percentage + '%', background: getBatteryColor(c.percentage)}"></view>
            </view>
            <text class="percentage-text">{{ c.percentage }}%</text>
          </view>
          <view class="cell">{{ getStatusText(c.status) }}</view>
        </template>
      </view>
    </view>

    <!-- 统计信息 -->
    <view v-if="stats" class="stats-section">
      <view class="stats-card">
        <view class="stat-item">
          <view class="stat-value">{{ stats.badgeCount }}</view>
          <view class="stat-label">铭牌总数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ stats.maxLevel }}</view>
          <view class="stat-label">最高等级</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ stats.avgLevel.toFixed(1) }}</view>
          <view class="stat-label">平均等级</view>
        </view>
      </view>
    </view>

    <!-- 词云展示 -->
    <view v-if="wordcloudData && Object.keys(wordcloudData).length > 0" class="wordcloud-section">
      <view class="section-title">词云</view>
      
      <!-- 词云加载状态 -->
      <view v-if="!wordcloudLoaded" class="wordcloud-loading">
        <text>词云加载中...</text>
      </view>
      
      <!-- 词汇列表显示 -->
      <view v-else>
        <view class="word-list">
          <view 
            v-for="(word, index) in wordList" 
            :key="index"
            class="word-item"
            :style="{ fontSize: word.size + 'px', color: word.color }"
          >
            {{ word.name }}
          </view>
        </view>
        
      </view>
    </view>

    <!-- 相关任务列表 -->
    <view class="tasks-section">
      <view class="section-title">相关任务</view>
      <view class="tasks-table-container">
        <view class="tasks-table-header">
          <view class="header-cell">任务标题</view>
          <view class="header-cell">铭牌</view>
          <view class="header-cell">奖励</view>
          <view class="header-cell">发布时间</view>
          <view class="header-cell">状态</view>
          <view class="header-cell">操作</view>
        </view>
        
        <view class="tasks-table-body">
          <view v-for="task in tasksList" :key="task.taskId" class="table-row" @click="viewTaskDetail(parseTaskData(task).taskId)">
            <view class="table-cell task-title-cell">{{ parseTaskData(task).title }}</view>
            <view class="table-cell badge-cell">
              <view v-for="badge in parseTaskData(task).badges" :key="badge.id" class="badge-wrapper">
                <view class="badge-tag">
                  {{ getBadgeNameByAssociation(badge.association) }} Lv{{ badge.level }}
                  <text class="badge-percent">{{ getCurrentUserContribution(badge) }}%</text>
                </view>
                <!-- 铭牌状态切换按钮（仅当前用户可见） -->
                <view v-if="isCurrentUser" class="badge-status-actions">
                  <button 
                    class="status-btn" 
                    :class="getStatusClass(getCurrentUserStatus(badge))"
                    @click.stop="toggleBadgeStatus(badge)"
                    :disabled="badge._isUpdating"
                  >
                    {{ badge._isUpdating ? '更新中...' : getStatusText(getCurrentUserStatus(badge)) }}
                  </button>
                </view>
              </view>
            </view>
            <view class="table-cell reward-cell">¥{{ parseTaskData(task).reward }}</view>
            <view class="table-cell time-cell">{{ formatDate(parseTaskData(task).publishTime) }}</view>
            <view class="table-cell status-cell">
              <view class="status-text" :class="getTaskStatusClass(parseTaskData(task).status)">
                {{ getTaskStatusText(parseTaskData(task).status) }}
              </view>
            </view>
            <view class="table-cell action-cell">
              <button class="detail-btn" @click.stop="viewTaskDetail(parseTaskData(task).taskId)">详情</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { NETWORK_CONFIG } from '@/config/network.js'
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getBadgeNameByAssociation } from '@/utils/skillUtils'
import { useUserStore } from '@/store/user'
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'

const userStore = useUserStore()
const contributorId = ref('')
const badges = ref('')
const badgeDetail = ref(null)
const stats = ref(null)
const tasksList = ref([])
const wordcloudData = ref(null)
const wordcloudLoaded = ref(false)

// 时间筛选
const startTime = ref('')
const endTime = ref('')

// 词云配置
const wordCloudOpts = ref({
  type: 'word',
  padding: [20, 20, 20, 20],
  dataLabel: false,
  dataPointShape: false,
  rotate: 0,
  width: '100%',
  height: '320px',
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4'],
  extra: {
    word: {
      type: 'normal',
      autoColors: true,
      minSize: 16,
      maxSize: 32,
      fontFamily: 'Arial, sans-serif',
      gridSize: 2,
      weightFactor: 2,
      rotationAngles: [0, 90],
      drawOutOfBound: false,
      shrinkToFit: true
    }
  }
})

// 词汇列表数据转换
const wordList = computed(() => {
  try {
    let data = []
    
    // 处理对象格式数据
    if (wordcloudData.value && typeof wordcloudData.value === 'object' && !Array.isArray(wordcloudData.value)) {
      for (const key in wordcloudData.value) {
        if (wordcloudData.value.hasOwnProperty(key)) {
          const weight = Number(wordcloudData.value[key]) || 1
          data.push({
            name: String(key || ''),
            value: Math.max(weight, 1)
          })
        }
      }
    } else {
      // 使用测试数据
      data = [
        { name: '测试', value: 10 },
        { name: '词云', value: 8 },
        { name: '数据', value: 6 },
        { name: '显示', value: 4 },
        { name: '正常', value: 3 }
      ]
    }
    
    // 按权重排序
    data.sort((a, b) => b.value - a.value)
    
    // 生成词汇列表，包含大小和颜色
    const colors = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4']
    const result = data.map((item, index) => ({
      name: item.name,
      size: Math.max(16, 32 - index * 3), // 字体大小递减
      color: colors[index % colors.length], // 循环使用颜色
      value: item.value
    }))
    
    return result
  } catch (error) {
    console.error('词汇列表转换错误:', error)
    return [
      { name: '错误', size: 20, color: '#ff4d4f', value: 1 },
      { name: '数据', size: 18, color: '#1890ff', value: 1 },
      { name: '格式', size: 16, color: '#52c41a', value: 1 }
    ]
  }
})

// 页面加载时获取参数
onLoad((options) => {
  contributorId.value = options.contributorId
  badges.value = options.badges
  if (!/^\d{6}$/.test(badges.value)) {
    uni.showToast({ title: '分区编码格式不正确', icon: 'none'})
    return
  }
  fetchBadgeDetail()
})

// 获取分区下铭牌详情
const fetchBadgeDetail = async () => {
  if (!contributorId.value || !badges.value) {
    uni.showToast({ title: '参数不完整', icon: 'none' })
    return
  }
  const token = uni.getStorageSync('accessToken')
  try {
    // 构建URL，添加时间筛选参数
    let url = `${NETWORK_CONFIG.API_BASE_URL}/badge/association?contributorId=${contributorId.value}&badges=${badges.value}`
    
    // 如果有时间筛选，添加到URL中
    if (startTime.value) {
      url += `&startPublishTime=${startTime.value}T00:00:00`
    }
    if (endTime.value) {
      url += `&endPublishTime=${endTime.value}T23:59:59`
    }
    
    const res = await uni.request({
      url: url,
      method: 'PATCH',
      header: {
        'Access-Token': `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    })
    const { badge, stats: statsData, tasks, wordcloud } = res.data
    badgeDetail.value = badge
    stats.value = statsData
    tasksList.value = (tasks && tasks.tasks) ? tasks.tasks : []
    wordcloudData.value = wordcloud
    
    // 调试词云数据
    console.log('词云数据:', wordcloud)
    console.log('词云数据长度:', wordcloud ? (Array.isArray(wordcloud) ? wordcloud.length : Object.keys(wordcloud).length) : 0)
    if (wordcloud && Array.isArray(wordcloud)) {
      console.log('词云数据示例:', wordcloud.slice(0, 3))
    } else if (wordcloud && typeof wordcloud === 'object') {
      console.log('词云数据示例:', Object.entries(wordcloud).slice(0, 3))
    }
    
    // 延迟加载词云组件
    if (wordcloud && ((Array.isArray(wordcloud) && wordcloud.length > 0) || (typeof wordcloud === 'object' && Object.keys(wordcloud).length > 0))) {
      console.log('准备加载词云组件，数据:', wordcloud)
      setTimeout(() => {
        wordcloudLoaded.value = true
        console.log('词云组件加载状态设置为:', wordcloudLoaded.value)
      }, 500)
    } else {
      console.log('词云数据为空或格式不正确:', wordcloud)
      // 即使没有数据也尝试加载组件，显示测试数据
      setTimeout(() => {
        wordcloudLoaded.value = true
        console.log('词云组件加载状态设置为:', wordcloudLoaded.value)
      }, 500)
    }
  } catch (error) {
    uni.showToast({ title: '获取铭牌详情失败', icon: 'none' })
  }
}

// 工具函数
const formatDate = (dateString) => {
  if (!dateString) return '暂无'
  return new Date(dateString).toLocaleString()
}

const getStatusText = (status) => {
  const statusMap = { 0: '默认', 1: '悬挂', 2: '私有' }
  return statusMap[status] || '未知状态'
}

const getTaskStatusText = (status) => {
  const numStatus = Number(status)
  const statusMap = { 1: '未完成', 2: '进行中', 3: '已完成' }
  return statusMap[numStatus] || '未知状态'
}

const parseTaskData = (taskString) => {
  try {
    const data = typeof taskString === 'string' ? JSON.parse(taskString) : taskString
    if (data.badges) {
      data.badges = data.badges.map(badge => ({ ...badge, status: Number(badge.status) }))
    }
    return data
  } catch (error) {
    return {}
  }
}

const getCurrentUserContribution = (badge) => {
  const currentUid = contributorId.value
  const contributor = badge.contributors.find(c => c.uid === Number(currentUid))
  return contributor ? contributor.percentage : 0
}

const getCurrentUserStatus = (badge) => {
  const currentUid = contributorId.value
  const contributor = badge.contributors.find(c => c.uid === Number(currentUid))
  return contributor ? contributor.status : 0
}

// 判断是否为当前用户
const isCurrentUser = computed(() => {
  return contributorId.value === userStore.profile.uid
})

// 铭牌状态切换功能
const toggleBadgeStatus = async (badge) => {
  if (!isCurrentUser.value) return;
  
  // 防止重复点击
  if (badge._isUpdating) return;
  badge._isUpdating = true;
  
  try {
    const token = uni.getStorageSync('accessToken');
    const currentStatus = getCurrentUserStatus(badge);
    // 状态循环：默认(0) -> 悬挂(1) -> 私有(2) -> 默认(0)
    const newStatus = (currentStatus + 1) % 3;
    
    console.log('状态切换:', {
      badgeId: badge.id,
      currentStatus,
      newStatus,
      statusText: ['默认', '悬挂', '私有'][newStatus]
    });
    
    await uni.request({
      url: `${NETWORK_CONFIG.API_BASE_URL}/badge/changestatus?badgeId=${badge.id}&status=${newStatus}`,
      method: 'PATCH',
      header: { 'Access-Token': `Bearer ${token}` },
      timeout: 10000
    });
    
    // 更新本地数据 - 直接修改原始数据
    const contributor = badge.contributors.find(c => c.uid === Number(contributorId.value));
    if (contributor) {
      contributor.status = newStatus;
      console.log('本地数据已更新:', {
        badgeId: badge.id,
        newStatus,
        contributor: contributor
      });
    }
    
    // 强制触发响应式更新 - 重新获取数据
    await fetchBadgeDetail();
    
    const statusTexts = ['默认', '悬挂', '私有'];
    uni.showToast({
      title: `已设置为${statusTexts[newStatus]}`,
      icon: 'success',
      duration: 2000
    });
  } catch (error) {
    console.error('更新铭牌状态失败', error);
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none',
      duration: 2000
    });
  } finally {
    // 重置更新状态
    badge._isUpdating = false;
  }
};

const getStatusClass = (status) => {
  const statusMap = { 0: 'status-default', 1: 'status-hanging', 2: 'status-private' }
  return statusMap[status] || 'status-default'
}

const getBatteryColor = (percentage) => {
  if (percentage < 10) return 'linear-gradient(90deg, #f44336, #ff9800)'
  else if (percentage < 30) return 'linear-gradient(90deg, #ff9800, #ffeb3b)'
  else return 'linear-gradient(90deg, #4caf50, #8bc34a)'
}

const getTaskStatusClass = (status) => {
  const numStatus = Number(status)
  const statusMap = { 1: 'status-unfinished', 2: 'status-ongoing', 3: 'status-completed' }
  return statusMap[numStatus] || 'status-unknown'
}

const viewTaskDetail = (taskId) => { 
  uni.navigateTo({ url: `/pages/task/detail/index?id=${taskId}` }) 
}

// 时间筛选相关方法
const onStartTimeChange = (e) => {
  startTime.value = e.detail.value
}

const onEndTimeChange = (e) => {
  endTime.value = e.detail.value
}

const resetTimeFilter = async () => {
  startTime.value = ''
  endTime.value = ''
  // 重置后重新加载数据
  await fetchBadgeDetail()
  uni.showToast({ 
    title: '已重置筛选', 
    icon: 'success',
    duration: 1500
  })
}

const applyTimeFilter = async () => {
  // 验证时间范围
  if (startTime.value && endTime.value) {
    if (new Date(startTime.value) > new Date(endTime.value)) {
      uni.showToast({ 
        title: '开始时间不能晚于结束时间', 
        icon: 'none',
        duration: 2000
      })
      return
    }
  }
  
  // 应用筛选，重新获取数据
  await fetchBadgeDetail()
  
  uni.showToast({ 
    title: '筛选已应用', 
    icon: 'success',
    duration: 1500
  })
}

// 图表初始化回调
const onChartInit = (chart) => {
  console.log('词云图表初始化成功:', chart)
  if (chart) {
    console.log('图表实例:', chart)
    console.log('图表配置:', chart.opts)
    console.log('图表类型:', chart.opts?.type)
    
    // 在微信小程序中，确保词云正确渲染
    setTimeout(() => {
      console.log('词云渲染延迟检查')
      if (chart && chart.updateData) {
        console.log('尝试更新词云数据')
        chart.updateData()
      }
    }, 200)
  }
}

// 图表错误回调
const onChartError = (error) => {
  console.error('词云图表错误:', error)
  uni.showToast({ title: '词云图表加载失败', icon: 'none' })
}

</script>

<style scoped>
.star-bg {
  display: none;
}

.badge-detail-container {
  position: relative;
  z-index: 1;
  padding: 20px 16px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f8f9fa;
  min-height: 100vh;
}

.badge-info-card, .stats-card, .tasks-section, .contributors-section, .wordcloud-section, .time-filter-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.time-filter-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-label {
  width: 90px;
  font-weight: 600;
  color: #64748b;
  font-size: 14px;
  flex-shrink: 0;
}

.picker-view {
  flex: 1;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 14px;
  transition: all 0.2s;
}

.picker-view:active {
  background: #e9ecef;
  border-color: #4a90e2;
}

.filter-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  justify-content: flex-end;
}

.reset-btn, .apply-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.reset-btn {
  background: #f1f5f9;
  color: #475569;
}

.reset-btn:active {
  background: #e2e8f0;
  transform: scale(0.95);
}

.apply-btn {
  background: #4a90e2;
  color: white;
}

.apply-btn:active {
  background: #357abd;
  transform: scale(0.95);
}

.badge-info-title, .section-title {
  color: #4a90e2;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.info-label {
  width: 90px;
  text-align: left;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
  font-size: 13px;
}

.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #4a90e2;
  color: white;
  padding: 24px 20px;
  border-radius: 16px;
  gap: 20px;
}

.stat-item {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stat-value {
  color: white;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.contributors-section .contributors-table {
  display: grid !important;
  grid-template-columns: 80px 80px 1fr 80px !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.contributors-section .header-cell, 
.contributors-section .cell {
  padding: 10px 8px;
  font-size: 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.contributors-section .header-cell {
  font-weight: 700;
  color: #6366f1;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

.contributors-section .cell {
  font-weight: 400;
  color: #374151;
  background: #fff;
}

.contributors-section .contribution-cell {
  gap: 8px;
}

.contributors-section .battery-bar {
  width: 60px;
  height: 12px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.contributors-section .battery-bar-inner {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.contributors-section .percentage-text {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.contributor-header-cell {
  font-weight: 700;
  color: #4a90e2;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.tasks-table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tasks-table-header {
  display: flex;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
  font-weight: 600;
  border-radius: 16px 16px 0 0;
  min-width: 950px;
}

.header-cell {
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-table-body {
  min-width: 950px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s;
  cursor: pointer;
}

.table-row:active {
  background: #f8fafc;
}

.table-cell {
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid #f1f5f9;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #374151;
  min-height: 80px;
}

.badge-cell {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 80px;
  padding: 8px 0;
}

.badge-tag {
  background: #4a90e2;
  color: white;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
  line-height: 1.3;
  text-align: center;
  justify-content: center;
  margin-bottom: 4px;
}

.badge-percent {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 8px;
}

.reward-cell {
  color: #f59e0b;
  font-weight: 700;
}

.time-cell {
  font-size: 13px;
  color: #6b7280;
}

.status-cell {
  justify-content: center;
  align-items: center;
  min-height: 80px;
  padding: 8px 12px;
}

.status-text {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  text-align: center;
  line-height: 1;
}

.status-unfinished {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-ongoing {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-completed {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-unknown {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.action-cell {
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  min-width: 160px;
  width: 160px;
  min-height: 80px;
}

.detail-btn {
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-btn:active {
  background: #357abd;
  transform: scale(0.95);
}

/* 铭牌状态切换按钮样式 */
.badge-status-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.status-btn {
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 50px;
  text-align: center;
  color: white;
  font-weight: 600;
  border: none;
  white-space: nowrap;
}

.status-default {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.status-hanging {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.status-private {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.status-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.status-btn:active {
  transform: scale(0.95);
}

.status-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.status-btn:disabled:hover {
  transform: none;
  filter: none;
}

/* 词云区域样式 */
.wordcloud-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
}

.word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  min-height: 320px;
  align-items: center;
  justify-content: center;
}

.word-item {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.word-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.apex-btn {
  background: #4a90e2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 80px !important;
  height: 36px !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.apex-btn:active {
  background: #357abd !important;
  transform: scale(0.95) !important;
}
</style>
